<template>
	<view class="page u-padding-20">
			<u--form class="u-m-b-20 numinput" label-position="top" label-width="auto">
				
				<u-form-item class="form-item" :label="$t('selectaddress')">
					<addressd @changes="area" :addressd="addressData"></addressd>
				</u-form-item>
				<u-form-item class="form-item" :label="$t('Full address')">
					<u--textarea v-model="addressData.address" :placeholder="$t('streeetc')" maxlength="500"></u--textarea>
				</u-form-item>
				<u-form-item class="form-item" :label="$t('consignee')" >
					<u--input v-model="addressData.consignee" :placeholder="$t('consignee')"/>
				</u-form-item>
				<u-form-item class="form-item" :label="$t('phone')">
					<u--input v-model="addressData.mobile" :placeholder="$t('phone')"/>
				</u-form-item>

				<u-form-item class="form-item" :label="$t('isdefault')">
					<!-- <switch color="red"  @change="setDefault" :checked="addressData.is_default" /> -->
					<u-switch v-model="addressData.is_default" active-color="red" inactive-color="#eee" ></u-switch>
					<text slot="right" style="font-size: 22rpx;width:70%;padding-left:10px;color: #007AFF; padding-right: 20rpx;word-wrap:break-word; word-break:normal;">{{$t('desc_defaultaddress')}}</text>
				</u-form-item>
			</u--form>

			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->

		<u-gap height="15"></u-gap>
		<u-button type="primary" @click="submit">{{$t('confirm')}}</u-button>
		<u-gap height="15"></u-gap>
		<view @click="dele()" class="u-text-center" v-if="addr_id>0">{{$t('del_btn')}}</view>
	</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_user_addresslist,api_user_addresssave,api_user_addressinfo,api_user_addressdel,api_region } from '@/config/api.js';

import addressd from "@/components/jm-address/jm-address.vue"
export default {
    components: {
        addressd
    },
	data() {
		return {
			manageType:'',
			addressData:{
				region_fullname:'',
				region_id:'',
				addr_id:'',
				consignee:'',
				mobile:'',
				address:'',
				is_default:false,
				region_idpath:[1,11,0],
				region_namepath:[this.$t('select1'),this.$t('select2'),this.$t('select3')]
			},
			addr_id:""
		};
	},
  computed: {
    ...mapState(["user"]),
  },
	onLoad(option) {
		let title = this.$t('pagetitle.newaddress');
		if (option.type === "edit") {
			title=this.$t('pagetitle.editaddress');
			this.addr_id=option.id
			this.addressinfo(option.id)
		}
		uni.setNavigationBarTitle({title: title});
		this.manageType=option.type;
		uni.setNavigationBarTitle({title});
	},
	methods: {
		area(e) {
			this.region_fullname=e.region_fullname
			this.addressData.region_id=e.region_id
        },
		addressinfo(addrid){
			api_user_addressinfo({
				addr_id:addrid
			}).then((res) => {
				console.log('addressData',res)
				this.addressData=res
				if (this.addressData.is_default == 1){this.addressData.is_default=true;}else{this.addressData.is_default=false;}
			}).catch((err) =>{})
		},
		submit(){

			if(this.addressData.region_id==''){
				uni.$u.toast(this.$t('noselect'))
				return;
			}

			api_user_addresssave({
				model:JSON.stringify(this.addressData)
			}).then((res) => {
					uni.$u.toast(`${this.manageType == "edit" ? this.$t('modify') : this.$t('new')}`+' '+this.$t('success'))
				setTimeout(() => {
					uni.navigateBack(1);
				}, 400);
			}).catch((err) =>{})
		},
		dele(){
			uni.showModal({
                title: this.$t('tips'),
                content: this.$t('desc_realdel'),
				confirmText: this.$t('confirm'),
				cancelText: this.$t('cancel'),
				success: (res) => {
				  if (res.confirm) {
					api_user_addressdel({
						addr_id:this.addr_id
					}).then((res) => {
							uni.$u.toast(this.$t('deleted'))
						setTimeout(() => {
							uni.navigateBack(1);
						}, 400);
					}).catch((err) =>{})
				  }
				},
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {

}
.wrap {

	.top {
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>
